<template>
	<view>
		<view class="att-con">
			<u-row gutter="16">
				<u-col span="12">
					<view class="att-list">
						<image width="100%" class="att-img" src="../../../static/avatar.png" />
						<view class="att-name">张三三</view>
						<view class="att-title">xx医疗集团</view>
					</view>
				</u-col>
				<!-- 列表 -->
				<u-col span="6" v-for="(item,index) in dataList" :key="index">
					<view class="att-list">
						<view class="att-flex">
							<image width="100%" class="att-img" :src="item.img" />
							<view>{{item.name}}</view>
						</view>
						<view class="att-flex">
							<view>{{item.num}}</view>
							<view>{{item.time}}</view>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
						img: '../../../static/avatar.png',
						name: '迟到',
						num: '3次',
						time: '35.00分钟'
					},
					{
						img: '../../../static/avatar.png',
						name: '早退',
						num: '1次',
						time: '11.00分钟'
					},{
						img: '../../../static/avatar.png',
						name: '旷工',
						num: '3次',
						time: '21分钟'
					},{
						img: '../../../static/avatar.png',
						name: '请假',
						num: '3次',
						time: '3.00天'
					},{
						img: '../../../static/avatar.png',
						name: '加班',
						num: '',
						time: '18.00小时'
					},{
						img: '../../../static/avatar.png',
						name: '补签卡',
						num: '4次',
						time: ''
					},{
						img: '../../../static/avatar.png',
						name: '出差',
						num: '5次',
						time: '5.00天'
					},
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.att-con {
		padding: 20rpx;
	}

	.att-list {
		background-color: #f7f6fb;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		display: flex;

		.att-name {
			flex: 20%;
			margin: auto;
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
		}

		.att-title {
			flex: 40%;
			margin: auto 0;
		}

		.att-flex {
			flex: 1;
			margin: auto;
			text-align: center;
		}

		.att-img {
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>
